<template>
  <div class="app-container">
    <div class="topHead">
      成果选择与提交
    </div>
    <el-divider />
    <div class="typeSelect clearfix">
      <div v-show="true" class="Select">
        一级成果类型：
        <span>
          <el-select v-model="value1" placeholder="请选择" style="width: 140px" @change="onL1SelectChange()">
            <el-option
              v-for="item in list1"
              :key="item.value1"
              :label="item.label1"
              :value="item.value1"
            />
          </el-select>
        </span>
      </div>
      <div v-show="true" class="Select">
        二级成果类型：
        <span>
          <el-select v-model="value2" placeholder="请选择" style="width: 160px" @change="onL2SelectChange()">
            <el-option
              v-for="item in list2"
              :key="item.value2"
              :label="item.label2"
              :value="item.value2"
            />
          </el-select>
        </span>
      </div>
      <div v-show="true" class="Select">
        三级成果类型：
        <span>
          <el-select v-model="value3" placeholder="请选择" @change="onL3SelectChange()">
            <el-option
              v-for="item in list3"
              :key="item.value3"
              :label="item.label3"
              :value="item.value3"
            />
          </el-select>
        </span>
      </div>
      <span>未找到？请联系辅导员处理。</span>
    </div>
    <div v-show="asIndex" class="box2">
      <div class="head">
        {{ selectResult }}
      </div>
      <br>
      <div v-for="i in type.length" :key="i" class="attrForm">
        <el-form ref="form" :model="form" label-position="top" label-width="125px">
          <!--多选框-->
          <el-form-item
            v-if="type[i-1].lavValue==='多选'"
            class="enum_1"
            :label="label[i-1]"
            :prop="'attrsList['+(i-1)+'].aiValue'"
            :rules="[{ required: true, message: '请选择', trigger: 'blur,change' }]"
          >
            <el-select
              v-model="form.attrsList[i-1].aiValue"
              multiple
              :placeholder="'选择' + label[i-1]"
            >
              <el-option
                v-for="{rChildrenName, rIndex} in form.enum[i-1]"
                :key="rIndex"
                :label="rChildrenName"
                :value="rChildrenName"
              />
            </el-select>
          </el-form-item>
          <!--单选框-->
          <el-form-item
            v-if="type[i-1].lavValue==='单选'"
            class="enum_2"
            :label="label[i-1]"
            :prop="'attrsList['+(i-1)+'].aiValue'"
            :rules="[{ required: true, message: '请选择', trigger: 'blur,change' }]"
          >
            <el-select
              v-model="form.attrsList[i-1].aiValue"
              :placeholder="'选择' + label[i-1]"
            >
              <el-option
                v-for="{rChildrenName, rIndex} in form.enum[i-1]"
                :key="rIndex"
                :label="rChildrenName"
                :value="rChildrenName"
              />
            </el-select>
          </el-form-item>
          <!--日期-->
          <el-form-item
            v-if="type[i-1].lavValue==='日期'"
            :label="label[i-1]"
            :prop="'attrsList['+(i-1)+'].aiValue'"
            :rules="[{ required: true, message: '请选择日期', trigger: 'blur,change' }]"
          >
            <el-date-picker
              v-model="form.attrsList[i-1].aiValue"
              placeholder="选择日期"
              style="width: 400px"
              value-format="yyyyMMdd"
            />
          </el-form-item>
          <!--附件-->
          <el-form-item
            v-if="type[i-1].lavValue==='附件'"
            class="attachment_3"
            :label="label[i-1]"
            :prop="'attrsList['+(i-1)+'].aiValue'"
            :rules="[{ required: true, message: '请上传有效附件！', trigger: 'blur,change' }]"
          >
            <el-upload
              ref="uploads"
              :auto-upload="false"
              :action="uploadAction"
              :headers="headers"
              accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP,.pdf,.PDF"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-change="OnfileChange"
              :on-exceed="handleExceed"
              :http-request="uploadFile"
              multiple
              :limit="1"
              :file-list="form.fileList"
              list-type="picture"
            >
              <el-button size="small">点击选取</el-button>
              <div slot="tip" class="el-upload__tip">请上传图片/PDF格式文件，且大小不超过10MB！</div>
            </el-upload>
          </el-form-item>
          <!-- 论文作者信息  -->
          <!--          <el-form v-if="false" ref="dynamicAuthorForm" :model="dynamicAuthorForm" label-width="100px" label-position="top" class="demo-dynamic">-->
          <!--            <el-form-item-->
          <!--              prop="address"-->
          <!--              label="第一作者所属单位"-->
          <!--              :rules="[-->
          <!--                { required: true, message: '请输入邮箱地址', trigger: 'blur' },-->
          <!--                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }-->
          <!--              ]"-->
          <!--            >-->
          <!--              <el-input v-model="dynamicAuthorForm.address" style="width: 20%" />-->
          <!--            </el-form-item>-->
          <!--            <el-form-item-->
          <!--              v-for="(domain, index) in dynamicAuthorForm.domains"-->
          <!--              :key="domain.key"-->
          <!--              :label="'第' + (index+1) + '作者'"-->
          <!--              :prop="'domains.' + index + '.value'"-->
          <!--              :rules="{-->
          <!--                required: true, message: '域名不能为空', trigger: 'blur'-->
          <!--              }"-->
          <!--            >-->
          <!--              <el-input v-model="domain.value" style="width: 20%; margin-right: 10px" placeholder="请输入内容" />-->
          <!--              <el-checkbox-group v-model="domain.checkList" style="display: inline-block; margin-right: 10px">-->
          <!--                <el-checkbox label="是否为导师" />-->
          <!--                <el-checkbox label="是否为共同作者" />-->
          <!--              </el-checkbox-group>-->
          <!--              <el-button v-if="index===dynamicAuthorForm.domains.length-1" type="primary" size="mini" icon="el-icon-plus" circle @click="addDomain" />-->
          <!--              <el-button v-if="index===dynamicAuthorForm.domains.length-1" type="danger" size="mini" icon="el-icon-delete" circle @click.prevent="removeDomain(domain)" />-->
          <!--            </el-form-item>-->
          <!--          </el-form>-->
          <!--输入框 字符(数字/文字)-->
          <el-form-item
            v-if="type[i-1].lavValue==='纯文本'"
            class="input_4"
            :label="label[i-1]"
            :prop="'attrsList['+(i-1)+'].aiValue'"
            :rules="[{ required: true, message: '请输入相关内容', trigger: 'blur,change' }]"
          >
            <el-input
              v-model="form.attrsList[i-1].aiValue"
              :placeholder="defaultWords[i-1]"
              style="width: 400px"
              @change="label[i-1]==='期刊名称'?fetchpsPublicationName(form.attrsList[i-1].aiValue):''"
            />
          </el-form-item>
          <!--期刊具体信息 -->
          <el-row v-if="(type[i-1]===4)&&(label[i-1]==='期刊名称')&&(showDetail)" :gutter="10">
            <el-col :xs="24" :sm="8">
              <div class="view-item">
                <i class="el-icon-star-off" /> <span> PaperType ： </span> {{ paperInfo.psPaperType }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="view-item">
                <i class="el-icon-star-off" /> <span> PublicationName ：</span> {{ paperInfo.psPublicationName }}
              </div>
            </el-col>
          </el-row>
          <el-row v-if="(type[i-1]===4)&&(label[i-1]==='期刊名称')&&(showDetail)" :gutter="10">
            <el-col :xs="24" :sm="8">
              <div class="view-item">
                <i class="el-icon-star-off" /> <span> TOPJournalLibrary ： </span> {{ paperInfo.psTOPJournalLibrary }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="view-item">
                <i class="el-icon-star-off" /> <span> EICompendexLibrary ：</span> {{ paperInfo.psEICompendexLibrary }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="view-item">
                <i class="el-icon-star-off" /> <span> SCIE ：</span> {{ paperInfo.psSCIE }}
              </div>
            </el-col>
          </el-row>
          <el-row v-if="(type[i-1]===4)&&(label[i-1]==='期刊名称')&&(showDetail)" :gutter="10">
            <el-col :xs="24" :sm="8">
              <div class="view-item">
                <i class="el-icon-star-off" /> <span> ESCI ： </span> {{ paperInfo.psESCI }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="view-item">
                <i class="el-icon-star-off" /> <span> AHCI ：</span> {{ paperInfo.psAHCI }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="view-item">
                <i class="el-icon-star-off" /> <span> SSCI ：</span> {{ paperInfo.psSSCI }}
              </div>
            </el-col>
          </el-row>
          <el-row v-if="(type[i-1]===4)&&(label[i-1]==='期刊名称')&&(showDetail)" :gutter="10">
            <el-col :xs="24" :sm="8">
              <div class="view-item">
                <i class="el-icon-star-off" /> <span> CSSCI ： </span> {{ paperInfo.psCSSCI }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="view-item">
                <i class="el-icon-star-off" /> <span> CSCD ：</span> {{ paperInfo.psCSCD }}
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="view-item">
                <i class="el-icon-star-off" /> <span> ChineseAcademyOfSciencesDivision ：</span> {{ paperInfo.psChineseAcademyOfSciencesDivision }}
              </div>
            </el-col>
          </el-row>
          <!-- 提交、重置 -->
          <el-form-item v-show="i===type.length">
            <el-button type="primary" :loading="buttonLoading" @click="submitUpload">立即提交</el-button>
            <el-button type="danger" @click="reset"> 取消提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  name: 'Index',
  data() {
    return {
      // 测试
      dynamicAuthorForm: {
        domains: [{
          value: '',
          checkList: []
        }],
        address: ''
      },
      input: '',
      // 显示期刊具体信息
      showDetail: false,
      paperInfo: {},
      // 验证ISSN期刊名称和表单必填项
      flagISSN: true,
      flagValid: false,
      flagUpload: false,
      // 用于证明文件提交
      uploadAction: '/api/achievement/award/insertAAnnex',
      dialogImageUrl: '',
      dialogVisible: false,
      // 提交按钮加载
      buttonLoading: false,
      // loading: false,
      // 用于三级奖项选择
      list1: [],
      value1: null,
      list2: [],
      value2: null,
      list3: [],
      value3: null,
      // 用于asIndex拉取
      asIndex: null,
      // 用于存放表单模块名称、类型数据
      label: [],
      type: [],
      // 下拉框选项
      form: {
        // 用于下拉框
        enum: [],
        rIndex: '',
        // 文件上传
        fileList: [],
        // 用于属性上传
        attrsList: []
      }
    }
  },
  computed: {
    selectResult: function() {
      return ((this.value1 === '请选择' || this.value1 === null) ? '' : ('已选奖项类型：' + this.value1)) + ((this.value2 === '请选择' || this.value2 === null) ? '' : ('---' + this.value2)) + ((this.value3 === '请选择' || this.value3 === null) ? '' : ('---' + this.value3))
    },
    headers: function() {
      return { Authorization: 'bearer ' + getToken() }
    },
    defaultWords: function() {
      const words = []
      for (let i = 0; i < this.type.length; i++) {
        words[i] = this.label[i] === '期刊名称' ? '输入出版物 ISSN (格式：xxxx-xxxx )' : '输入' + this.label[i]
      }
      return words
    }
  },
  mounted() {
    this.fetchScoringAspect()
  },
  methods: {
    // // 新增作者
    // addDomain() {
    //   this.dynamicAuthorForm.domains.push({
    //     value: '',
    //     checkList: [],
    //     key: Date.now()
    //   })
    // },
    // removeDomain(item) {
    //   var index = this.dynamicAuthorForm.domains.indexOf(item)
    //   if (index !== -1) {
    //     this.dynamicAuthorForm.domains.splice(index, 1)
    //   }
    // },
    // 原有
    onL1SelectChange() {
      this.flagISSN = false
      this.showDetail = false
      this.label = []
      this.type = []
      this.asIndex = null
      this.list2 = []
      this.list3 = []
      this.form = {
        // 用于下拉框
        enum: [],
        rIndex: '',
        // 文件上传
        fileList: [],
        // 用于属性上传
        attrsList: []
      }
      this.value2 = '请选择'
      this.value3 = '请选择'
      this.fetchScoringItem()
    },
    onL2SelectChange() {
      this.flagISSN = false
      this.showDetail = false
      this.label = []
      this.type = []
      this.asIndex = null
      this.value3 = '请选择'
      this.list3 = []
      this.form.attrsList = []
      this.fetchAwardLevel()
    },
    onL3SelectChange() {
      this.flagISSN = false
      this.flagUpload = false
      this.showDetail = false
      this.asIndex = null
      this.label = []
      this.type = []
      this.form.attrsList = []
      this.flagISSN = true
      this.fetchasIndex()
    },
    // 由API拉取三级选项填写的数据
    fetchScoringAspect(params = {}) {
      params.colName = 'as_scoring_aspect'
      this.$get('achievement/award/queryAwardAttr', {
        ...params
      }).then((r) => {
        const data = r.data.data
        for (let i = 0; i < data.stateItemsValue.length; i++) {
          this.list1.push(
            {
              value1: data.stateItemsValue[i],
              label1: data.stateItemsValue[i]
            })
        }
      })
    },
    fetchScoringItem(params = {}) {
      params.colName = 'as_scoring_item'
      params.colFatherName = 'as_scoring_aspect'
      params.fatherName = this.value1
      this.$get('achievement/award/queryNextAwardStructure', {
        ...params
      }).then((r) => {
        const data = r.data.data
        for (let i = 0; i < data.length; i++) {
          this.list2.push(
            {
              value2: data[i],
              label2: data[i]
            })
        }
      })
    },
    fetchAwardLevel(params = {}) {
      params.colName = 'as_award_level'
      params.colFatherName = 'as_scoring_item'
      params.fatherName = this.value2
      this.$get('achievement/award/queryNextAwardStructure', {
        ...params
      }).then((r) => {
        const data = r.data.data
        for (let i = 0; i < data.length; i++) {
          this.list3.push(
            {
              value3: data[i],
              label3: data[i]
            })
        }
      })
    },
    // 由API根据三级选择的内容 给出asIndex
    fetchasIndex(params = {}) {
      params.asScoringAspect = this.value1
      params.asScoringItem = this.value2
      params.asAwardLevel = this.value3
      this.$get('achievement/award/queryAwardStructureIDByString', {
        ...params
      }).then((r) => {
        // const data = r.data.data
        // this.asIndex = data
        this.asIndex = r.data.data
        this.fetchAttr()
      })
    },
    // 调取成果属性
    fetchAttr(params = {}) {
      params.asIndex = this.asIndex
      this.$get('achievement/award/queryAwardAllAttr', {
        ...params
      }).then((r) => {
        // this.loading = false
        const data = r.data.data
        this.label = data.enumValue
        this.type = data.inputTypes
        this.form.enum = data.relations
        for (let i = 0; i < this.type.length; i++) {
          const random = Date.parse(new Date()).toString().substr(0, 10) + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString()
          this.form.attrsList.push({
            aiValue: '',
            aiIndex: random,
            asIndex: data.awardAttributes[i].asIndex,
            aaIndex: data.awardAttributes[i].aaIndex,
            sbiIDType: '',
            aindex: '',
            sbiIDNumber: '',
            aaAttributeId: data.awardAttributes[i].aaAttributeId
          })
        }
      })
    },
    // 通过ISSN获取期刊名称 触发方式v-on=change 成功则期刊名称绑定给ai-value，flagISSN为false； 失败则弹框。aiValue为用户输入值 flagISSN为false
    fetchpsPublicationName(value) {
      // 只要有期刊名称接口的情况 先赋值为FLASE
      this.flagISSN = false
      this.showDetail = false
      this.$get('achievement/award/queryPeriodicalByISSN', {
        psISSN: value
      }).then((r) => {
        if (r.data.data) {
          this.flagISSN = true
          this.paperInfo = r.data.data
          this.form.attrsList[this.label.indexOf('期刊名称')].aiValue = r.data.data.psPublicationName
          this.$message({
            message: 'ISSN至期刊名称转换成功',
            type: 'success'
          })
          this.showDetail = true
        } else {
          this.flagISSN = false
          this.showDetail = false
          this.form.attrsList[this.label.indexOf('期刊名称')].aiValue = ''
          this.$alert('暂未获取对应出版物，请检查ISSN。若仍有问题，请联系辅导员处理。', 'ISSN读取失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message.error('暂未获取对应出版物，请检查ISSN')
            }
          })
          // this.form.attrsList[this.label.indexOf('期刊名称')].aiValue = '请检查ISSN是否正确，如有问题，联系辅导员。'
        }
      })
    },
    // 上传属性
    submitAttr() {
      if (this.label.indexOf('证明材料（附件）') !== -1) {
        this.submitUpload()
      }
      // for循环开始，判断每个form是否合规
      for (let h = 0; h < this.type.length; h++) {
        // 根据验证结果给flag赋值
        this.$refs.form[h].validate((valid) => {
          if (valid) {
            this.flagValid = valid
          } else {
            this.flagValid = valid
          }
          return valid
        })
        if (this.flagValid === false) { break }
      }
      // 根据两个flag内容确定是否发出POST请求
      if (this.flagValid && this.flagISSN) {
        console.log(this.form.attrsList)
        this.buttonLoading = true
        axios({
          method: 'post',
          url: '/api/achievement/award/insertStuAward',
          headers: { Authorization: 'bearer ' + getToken() },
          data: this.form.attrsList
        }).then((r) => {
          // .then(
          this.buttonLoading = false
          // response => (this.info = response.data),
          this.$message({
            message: this.$t('tips.createSuccess'),
            type: 'success'
          })
          window.open('/#/student/see_awards', '_self')
          this.reset()
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        })
          .catch(function(error) { // 请求失败处理
            console.log(error)
          })
      } else {
        this.$message.error('请按照规则填写表单')
        return false
      }
    },
    // 清空表单
    resetForm() {
      // 内置方式
      for (let h = 0; h < this.type.length; h++) {
        this.$refs.form[h].resetFields()
      }
    },
    // 重置数据
    reset() {
      this.flagISSN = true
      this.label = []
      this.type = []
      this.asIndex = null
      this.form = []
      this.value1 = null
      this.value2 = null
      this.value3 = null
      this.list1 = []
      this.list2 = []
      this.list3 = []
      this.fetchScoringAspect()
      return 0
    },
    // 用于文件传输
    submitUpload() {
      console.log('submitUpload running')
      if (this.label.indexOf('证明材料（附件）') !== -1 && this.flagUpload) {
        this.$refs.uploads[0].submit()
      } else {
        // for循环开始，判断每个form是否合规
        for (let h = 0; h < this.type.length; h++) {
          // 根据验证结果给flag赋值
          this.$refs.form[h].validate((valid) => {
            if (valid) {
              this.flagValid = valid
            } else {
              this.flagValid = valid
            }
            return valid
          })
          if (this.flagValid === false) { break }
        }
        // 根据两个flag内容确定是否发出POST请求
        if (this.flagValid && this.flagISSN) {
          console.log(this.form.attrsList)
          this.buttonLoading = true
          axios({
            method: 'post',
            url: '/api/achievement/award/insertStuAward',
            headers: { Authorization: 'bearer ' + getToken() },
            data: this.form.attrsList
          }).then((r) => {
            // .then(
            this.buttonLoading = false
            // response => (this.info = response.data),
            this.$message({
              message: this.$t('tips.createSuccess'),
              type: 'success'
            })
            window.open('/#/student/see_awards', '_self')
            this.reset()
            this.$message({
              message: '提交成功',
              type: 'success'
            })
          })
            .catch(function(error) { // 请求失败处理
              console.log(error)
            })
        } else {
          this.$message.error('你不好好填写上传个锤子，按照规则把表单内容填完整啦')
          return false
        }
      }
    },
    uploadFile(content) {
      // console.log(content)
      console.log('uploadFile running')
      const form = new FormData()
      form.append('file', content.file)
      this.buttonLoading = true
      axios({
        method: 'post',
        url: '/api/achievement/award/insertAAnnex',
        headers: { Authorization: 'bearer ' + getToken() },
        data: form,
        params: { id: this.type[this.label.indexOf('证明材料（附件）')].aaIndex }
      }).then(res => {
        console.log('111')
        this.form.attrsList[this.label.indexOf('证明材料（附件）')].aiValue = res.data.data.annexPath
        if (res.data.code !== 200) {
          content.onError('文件上传失败, code:' + res.data.code)
          this.buttonLoading = false
        } else {
          content.onSuccess('文件上传成功！')
        }
        // for循环开始，判断每个form是否合规
        for (let h = 0; h < this.type.length; h++) {
          // 根据验证结果给flag赋值
          this.$refs.form[h].validate((valid) => {
            if (valid) {
              this.flagValid = valid
            } else {
              this.flagValid = valid
            }
            return valid
          })
          if (this.flagValid === false) { break }
        }
        // 根据两个flag内容确定是否发出POST请求
        if (this.flagValid && this.flagISSN) {
          console.log(this.form.attrsList)
          axios({
            method: 'post',
            url: '/api/achievement/award/insertStuAward',
            headers: { Authorization: 'bearer ' + getToken() },
            data: this.form.attrsList
          }).then((r) => {
            // .then(
            this.buttonLoading = false
            // response => (this.info = response.data),
            this.$message({
              message: this.$t('tips.createSuccess'),
              type: 'success'
            })
            window.open('/#/student/see_awards', '_self')
            this.reset()
            this.$message({
              message: '提交成功',
              type: 'success'
            })
          })
            .catch(function(error) { // 请求失败处理
              console.log(error)
            })
        } else {
          this.$message.error('你不好好填写上传个锤子，按照规则把表单内容填完整啦')
          return false
        }
      }).catch(error => {
        console.log('error occurs')
        this.buttonLoading = false
        console.log(error.response)
        if (error.response) {
          content.onError('文件上传失败,' + error.response.data)
        } else if (error.request) {
          content.onError('文件上传失败，服务器端无响应')
        } else {
          content.onError('文件上传失败，请求封装失败')
        }
      })
    },
    // 限制文件的大小，限制文件的类型 | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    OnfileChange(file) {
      console.log('onfileChange')
      this.form.fileList = []
      const isJPG = file.raw.type === 'image/png' || file.raw.type === 'image/jpg' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/gif' || file.raw.type === 'image/bmp' || file.raw.type === 'image/JPG' || file.raw.type === 'image/JPEG' || file.raw.type === 'image/GIF' || file.raw.type === 'image/BMP' || file.raw.type === 'application/pdf'
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('证明材料仅允许 jpg/jpeg/png/gif/bmp/pdf 格式!请重新选取')
      }
      if (!isLt10M) {
        this.$message.error('证明材料大小不能超过 10MB!请重新选取')
      }
      if (isJPG && isLt10M) {
        this.form.fileList.push(file)
      }
      this.flagUpload = isJPG && isLt10M
      return isJPG && isLt10M
    },
    // 限制文件的数量
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      this.$message.warning(`当前限制选择 1 个文件`)
    },
    // 预览函数
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 则停止删除。
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      this.flagUpload = false
    }
  }
}
</script>

<style scoped>
.topHead {
  font-size: 20px;
  font-weight: bolder;
  color: #706c6c;
  text-align: left;
}

.typeSelect {
  height: auto;
}

.Select {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  margin: 0 10px;
  background-color: white;
  display: inline-block
}

.typeSelect span {
  color: #171616;
  line-height: 40px;
  margin: 0 auto;
  font-size: 16px;
  text-align: center;
}

.box2 {
  margin: 10px 0;
  box-shadow: 0 -2px rgba(151, 152, 157, 0.1);
  padding-top: 25px;
}

.head {
  font-weight: bolder;
  font-size: 16px;
  color: #706c6c;
  text-align: left;
  margin-bottom: 10px;
}

</style>
